<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#1c162e"
                 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router @select="choose">
            <template v-for="item in items">
                <template v-if="item.children">
                    <el-submenu :index="item.url" :key="item.url">
                        <template slot="title">
                            <i class="fa" :class="item.icon"></i><span slot="title">{{ item.name }}</span>
                        </template>
                        <template v-for="subItem in item.children">
                            <el-submenu v-if="subItem.children" :index="subItem.url" :key="subItem.url">
                                <template slot="title">{{ subItem.name }}</template>
                                <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.url">
                                    {{ threeItem.name }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.url" :key="subItem.url">
                                {{ subItem.name }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.url">
                        <i class="fa" :class="item.icon"></i><span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';
    import pub from '../../utils/pub'
    export default {
        data() {
            return {
                collapse: false,
                items: [
                    {
                        name: '首页',
                        url: '/dashboard',
                        icon: 'el-icon-lx-home',
                    },
                    {
                        name: '新闻分类',
                        url: '/module2/news-class',
                        icon: 'el-icon-lx-home',
                    },
                    {
                        name: '新闻管理',
                        url: '/module2/news',
                        icon: 'el-icon-lx-home',
                    },
                    {
                        name: '产品分类',
                        url: '/module2/product-class',
                        icon: 'el-icon-lx-home',
                    },
                    {
                        name: '产品管理',
                        url: '/module2/product',
                        icon: 'el-icon-lx-home',
                    },
                ],
            }
        },
        computed:{
            onRoutes(){
                // return this.$route.path.replace('/','');
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 点击路由菜单事件
            choose(){
                // console.log(this.$route.fullPath)
            },
            getMenu(){
                this.loadopen();
                this.config.post('/admin/manager/menu/findAll', {}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        let arr = res.data.menuList;
                        let marr = [];
                        arr.forEach(it=>{
                            marr.push(it.id);
                        });
                        sessionStorage.setItem('menuBtnArr', JSON.stringify(marr));
                        let tree = pub.arrayToTree(arr, 'id', 'pid');
                        this.items = this.items.concat(tree);
                    }else{
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
        },
        created(){
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
            });
            // this.getMenu();
        }
    }
</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom:0;
        overflow-y: scroll;
    }
    .sidebar .fa{
        font-size: 1.2rem;
        margin-right: 0.5rem;
    }
    .sidebar::-webkit-scrollbar{
        width: 0;
    }
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 250px;
    }
    .sidebar > ul {
        height:100%;
    }
</style>
